import { Tabs } from 'nextra/components';
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Breadcrumb

Displays a list of links that help visualize a page's location within a site's hierarchical structure.
It allows navigation up to any of the ancestors.

<LinkBadgeGroup>
    <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.breadcrumb/"/>
</LinkBadgeGroup>

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='breadcrumb' variant='default' height={400}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart copy
        FBreadcrumb(
          children: [
            FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
            FBreadcrumbItem.collapsed(
              menu: [
                FItemGroup(
                  children: [
                    FItem(
                      title: const Text('Documentation'),
                      onPress: () {},
                    ),
                    FItem(
                      title: const Text('Themes'),
                      onPress: () {},
                    ),
                  ],
                ),
              ],
            ),
            FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
            FBreadcrumbItem(current: true, child: const Text('Widgets')),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create breadcrumb
```

## Usage

### `FBreadcrumb(...)`

```dart copy
FBreadcrumb(
  style: FBreadcrumbStyle(...),
  children: [
    FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
    FBreadcrumbItem.collapsed(
      menu: [
        FTileGroup(
          children: [
            FTile(
              title: const Text('Documentation'),
              onPress: () {},
            ),
            FTile(
              title: const Text('Themes'),
              onPress: () {},
            ),
          ],
        ),
      ],
      spacing: const FPortalSpacing(4),
      offset: Offset.zero,
      traversalEdgeBehavior: TraversalEdgeBehavior.closedLoop,
    ),
    FBreadcrumbItem(onPress: () {}, child: const Text('Themes')),
    FBreadcrumbItem(current: true, child: const Text('Widgets')),
  ],
);
```

## Examples

### Tiles

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='breadcrumb' variant='tiles' height={400}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart {4} copy
        FBreadcrumb(
          children: [
            FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
            FBreadcrumbItem.collapsedTiles(
              menu: [
                FTileGroup(
                  children: [
                    FTile(
                      title: const Text('Documentation'),
                      onPress: () {},
                    ),
                    FTile(
                      title: const Text('Themes'),
                      onPress: () {},
                    ),
                  ],
                ),
              ],
            ),
            FBreadcrumbItem(onPress: () {}, child: const Text('Layout')),
            FBreadcrumbItem(current: true, child: const Text('Widgets')),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>

### Custom Divider

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='breadcrumb' variant='divider' height={400}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart copy
        FBreadcrumb(
          divider: Transform.rotate(
            angle: -60,
            child: Icon(
              FIcons.slash,
              size: 14,
            ),
          ),
          children: [
            FBreadcrumbItem(onPress: () {}, child: const Text('Forui')),
            FBreadcrumbItem.collapsed(
              menu: [
                FItemGroup(
                  children: [
                    FItem(
                      title: const Text('Documentation'),
                      onPress: () {},
                    ),
                    FItem(
                      title: const Text('Themes'),
                      onPress: () {},
                    ),
                  ],
                ),
              ],
            ),
            FBreadcrumbItem(onPress: () {}, child: const Text('Themes')),
            FBreadcrumbItem(current: true, child: const Text('Widgets')),
          ],
        );
        ```
    </Tabs.Tab>
</Tabs>
